<template>
	<scroll-view scroll-y="true" class="cont" @click="C_resSend">
		<view class="list" v-for="(item,index) in commentList" :key='index'>
			<image :src="item.userinfo.avatar" mode="aspectFill" class="avatar"></image>
			<view>
				<view class="sb">
					<text class="name">{{item.userinfo.name}}</text>
					<text class="time">{{item.ctime}}</text>
				</view>
				<view class="intro">{{item.says}}</view>
				<view class="reply" @click.stop="C_reply(item.id,item.userinfo.name)">回复</view>
				
				<view class="children" v-if='item.children.length'>
					<view v-for="(ite,ind) in item.children" :key='ind'>
						<view class="sb">
							<text class="name">{{ite.userinfo.name}}</text>
							<text class="time">{{ite.ctime}}</text>
						</view>
						<view class="intro">{{ite.says}}</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name:"l-comment",
		props:['commentList'],
		data() {
			return {
				// commentList:[
				// 	{
				// 		auser_id:86,avideo_id:182,id:33,says:'这里是评论的内容这这里是评论的内容这里是评论的内容这这里是评论的内容这里是评论的内容这这里是评论的内容',ctime:'2021-11-03 11:15:52',
				// 		userinfo:{id:86,name:'加特米',avatar:'http://video.zhoujiasong.top/uploads/thumb/20211029/YtdInhzkem.jpg',},
				// 		children:[
				// 			{
				// 				auser_id:86,avideo_id:182,id:33,says:'这里是评论的内容',ctime:'2021-11-03 11:15:52',
				// 				userinfo:{id:86,name:'@加特米',avatar:'http://video.zhoujiasong.top/uploads/thumb/20211029/YtdInhzkem.jpg',},
				// 			},
				// 			{
				// 				auser_id:86,avideo_id:182,id:33,says:'这里是评论的内容',ctime:'2021-11-03 11:15:52',
				// 				userinfo:{id:86,name:'@加特米',avatar:'http://video.zhoujiasong.top/uploads/thumb/20211029/YtdInhzkem.jpg',},
				// 			},
				// 		]
				// 	},
				// ]
			};
		},
		methods:{
			/*点击回复*/
			C_reply(id,name){
				this.$emit('C_reply',{id,name})
			},
			/*清除输入框文案*/
			C_resSend(){
				this.$emit('C_resSend')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cont{
		background-color: #FFFFFF;
		height: 700rpx;
		.list{
			display: flex;
			margin: 0 20rpx 0rpx 0;
			position: relative;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eeeeee;
			.reply{
				position: absolute;
				right: 0;
				top: 65rpx;
				border-radius: 50rpx;
				background-color: #4b96df;
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 5rpx 20rpx;
			}
			.avatar{
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
				margin: 20rpx;
			}
			>view{
				margin-top: 20rpx;
				flex: 1;
				.sb{
					display: flex;
					justify-content: space-between;
					.name{font-weight: bold;font-size: 30rpx;color: #333333;}.time{color: gray;font-size: 24rpx;}
				}
				.intro{
					font-size: 24rpx;
					margin: 10rpx 0;
					width: 80%;
					line-height: 40rpx;
				}
				.children{
					background-color: #eee;
					padding: 20rpx;
					box-sizing: border-box;
					.name{
						font-size: 24rpx;
					}
				}
			}
			
		}
	}
	
	
	
	/*
	.cont {
		margin-top: 150rpx;   
		height: 800rpx;
		overflow-y: scroll;
		padding: 0 50rpx;
		padding-right: 0;
		box-sizing: border-box;
		border: 1px solid red;
		
		.list {
			padding-right: 50rpx;
			display: flex;
			justify-content: space-between;
			// overflow-y: scroll;
			margin: 30rpx 0;
	
			image {
				width: 80rpx;
				height: 80rpx;
	
				&+view {
					width: 85%;
	
					>view {
						&:first-child {
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: gray;
						}
	
						&:last-child {
							font-size: 25rpx;
							margin-top: 15rpx;
						}
					}
				}
			}
		}
	
		&+view {
			background-color: #FFFFFF;
			padding: 20rpx 50rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
	
			input {
				flex: 1;
				background-color: #F6F6F6;
				height: 80rpx;
				padding-left: 50rpx;
				border-radius: 50rpx;
			}
	
			text {
				background-color: #3F85FF;
				color: #FFFFFF;
				padding: 15rpx 0;
				width: 120rpx;
				border-radius: 30rpx;
				margin-left: 30rpx;
				text-align: center;
			}
		}
	}*/
</style>
